<template>
    <div class="main">
        <el-card class="!border-none mt-4" shadow="never">
            <el-card>
                <template #header>
                    <div class="card-header flex justify-start item-center gap-6">
                        <div class="label">抽奖活动持续时间 / 分钟：</div>
                        <el-input-number v-model="configData.duration" :min="0" :step="1"/>
                        <el-button type="success" v-show="configData.prize_status == 1" @click="goStart(1)" style="margin-left: auto">开启抽奖</el-button>
                        <el-button type="danger" v-show="configData.prize_status == 2" @click="goStart(2)" style="margin-left: auto">暂停抽奖</el-button>
                        <el-button type="primary" @click="addGood()" >增加奖项</el-button>
                    </div>
                </template>
                <div class="card-div" v-for="(res, index) in prizeList" :key="res">
                    <div class="card-div-title">奖品{{index+1}}</div>
                    <div class="card-div-content">
                        <div class="card-div-item">
                            <div class="label"><div style="color: red; margin-right: 2px">*</div>名称</div>
                            <el-input v-model="res.name" placeholder="请输入奖品名称1" />
                        </div>
                        <div class="card-div-item">
                           <div style="display: flex; flex-direction: column; gap: 10px">
                               <div style="display: flex; flex-direction: row">
                                   <div class="label"><div style="color: red; margin-right: 2px">*</div>类型</div>
                                   <el-select v-model="res.type">
                                       <template v-for="(item, index) in goodList">
                                           <el-option :label="item.name" :value="item.id" />
                                       </template>
                                   </el-select>
                               </div>
                               <div v-if="res.type === 1" style="display: flex; flex-direction: row">
                                   <div class="label"><div style="color: red; margin-right: 2px">*</div>奖励积分值</div>
                                   <el-input-number v-model="res.score_num" :min="1" :step="1"/>
                               </div>
                               <div v-if="res.type === 2" style="display: flex; flex-direction: row">
                                   <div class="label"><div style="color: red; margin-right: 2px">*</div>奖励鸡蛋数</div>
                                   <el-input-number v-model="res.egg_num" :min="1" :step="1"/>
                               </div>
                               <div v-if="res.type === 3" style="display: flex; flex-direction: row">
                                   <div class="label"><div style="color: red; margin-right: 2px">*</div>奖励现金红包金额</div>
                                   <el-input-number v-model="res.cash_num" :min="1" :step="1"/>
                               </div>
                               <div v-if="res.type === 4" style="display: flex; flex-direction: row">
                                   <div class="label"><div style="color: red; margin-right: 2px">*</div>请选择优惠券</div>
                                   <el-select v-model="res.coupon_id">
                                       <template v-for="(item, index) in optionsData.category.list">
                                           <el-option :label="item.name" :value="item.id" />
                                       </template>
                                   </el-select>
                               </div>
                           </div>
                        </div>
                        <div class="card-div-item">
                            <div class="label">上传封面</div>
                            <div style="display: flex; flex-direction: column; gap: 10px; justify-content: center; align-items: center">
                                <el-image v-if="res.cover" style="width: 100px; height: 100px" :src="res.cover" />
                                <upload
                                        v-model="res.cover"
                                        :type="'image'"
                                        :show-progress="true"
                                        @changeGet="actionImg(res)"
                                >
                                    <el-button type="primary">本地上传</el-button>
                                </upload>
                            </div>
                        </div>
                        <div class="card-div-item">
                            <div class="label"><div style="color: red; margin-right: 2px">*</div>中奖概率 / %</div>
                            <el-input-number v-model="res.probability" :min="0" :step="1"/>
                        </div>
                        <div class="card-div-item">
                            <div class="label">奖品库存</div>
                            <el-input-number v-model="res.quantity" :min="0" :step="1"/>
                        </div>
                        <div class="card-div-button">
                            <div class="button" @click="deleteGood(index)">删除此项</div>
                        </div>
                    </div>
                </div>
            </el-card>
            <footer-btns v-perms="['goods.goods/edit', 'goods.goods/add']">
                <el-button type="primary" @click="handleSubmit">保存</el-button>
            </footer-btns>
        </el-card>
    </div>
</template>
<script lang="ts" setup>
    import { rulesContent } from "./data";
    import { useDictOptions } from "@/hooks/useDictOptions";
    import feedback from "@/utils/feedback";
    import { getConfig, updateConfig, savePrize, getPrizeList, couponList } from '@/api/turntable'
    // import CutPop from "./component/form.vue";
    import useAppStore from "@/stores/modules/app";
    import {reactive, ref} from "vue";


    const configData = reactive({
        prize_status: 1, // 抽奖状态【1：未抽奖|2：抽奖中】
        duration: 0, //活动持续时间/分钟
        config_id: 0
    });
    getConfig().then(res => {
        configData.prize_status = res.prize_status;
        configData.duration = res.duration;
        configData.config_id = res.config_id
    });




    const goodList = [
        {
            id: 1,
            name: '积分'
        },
        {
            id: 2,
            name: '鸡蛋'
        },
        {
            id: 3,
            name: '现金红包'
        },
        {
            id: 4,
            name: '优惠券'
        },
        // {
        //     id: 5,
        //     name: '商品'
        // },
        {
            id: 6,
            name: '谢谢惠顾'
        },
    ];
    const prizeList:any = ref([]);
    const { optionsData } = useDictOptions<{
        category: any[]
    }>({
        category: {
            api: couponList
        }
    });
    getPrizeList().then(res => {
        prizeList.value = res.list;
    });




    // 照片更新
    const actionImg = (res:any) => {};


    // 增加奖项
    const addGood = () => {
        prizeList.value.push(
            {
                name: "",
                cover: "",
                probability: 0,
                type: 1,
                score_num: 1,
                egg_num: 0,
                cash_num: 0,
                coupon_id: 0,
                goods_code: "",
                goods_sku: "",
                quantity: 0
            }
        )
    };

    // 删除抽奖项
    const deleteGood = async (index: number) => {
        await feedback.confirm('确定删除此奖项？');
        prizeList.value.splice(index, 1)
    };

    // 开启抽奖
    const goStart = async (state: number) => {
        state == 1 ?  await feedback.confirm('确定开启抽奖活动？') : await feedback.confirm('确定暂停抽奖活动？');
        await updateConfig({
            switch: state,
            duration: configData.duration,
            config_id: configData.config_id,
        });
        configData.prize_status = configData.prize_status == 2 ? 1: 2
    };

    const handleSubmit = async () => {
        try {
            if (prizeList.value.reduce(function (prv:any, net:any) {
                return prv + net.probability
            }, 0) !== 100) {
                feedback.alert(`中将概率合计必须等于100%`);
                throw false
            }
            prizeList.value.forEach((res:any, index: number) => {
                if (!res.name) {
                    feedback.alert(`奖品${index+1}名称不能为空`);
                    throw false
                }
                if (!res.type) {
                    feedback.alert(`奖品${index+1}中奖类型不能为空`);
                    throw false
                }
                if (!res.probability) {
                    feedback.alert(`奖品${index+1}中奖概率不能为空`);
                    throw false
                }
            });
            savePrize({prize_params: JSON.stringify(prizeList.value)})
        } catch (error) {}
    };
</script>
<style lang="scss" scoped>
    .label {
        display: flex;
        justify-content: center;
        align-items: center;
        white-space:nowrap;
        &:after {
            content: '：'
        }
    }
    .card-div {
        min-width: 100%;
        display: flex;
        flex-direction: row;
        justify-content: flex-start;
        align-items: center;
        margin-bottom: 20px;
        border: 1px #B6B6B6 solid;
        overflow-y: auto;
        /*flex-basis: 48%;*/
        .card-div-title {
            white-space: nowrap;
        }
        &:hover {
            box-shadow: 0 0 6px #B6B6B6;
            .card-div-title {
                font-weight: 600;
            }
        }
        .card-div-title {
            /*border: 1px red solid;*/
            margin-left: 10px;
            height: 100%;
            display: flex;
            justify-content: center;
            align-items: center;
            font-size: 20px;
            color:#2494f2;
        }
        .card-div-content {
            /*border: 1px red solid;*/
            display: flex;
            flex-direction: row;
            /*justify-content: space-around;*/
            /*align-items: center;*/
            padding: 20px;
            flex: 1;
            gap: 40px;
            .card-div-item {
                /*border: 1px red solid;*/
                display: flex;
                justify-content: center;
                align-items: center;
            }
            .card-div-button {
                flex: 1;
                display: flex;
                justify-content: flex-end;
                align-items: center;
                white-space:nowrap;
                .button {
                    display: inline-block;
                    padding: 6px 20px;
                    border-radius: 20px;
                    border: 1px #50db93 solid;
                    &:hover {
                        cursor: pointer;
                        box-shadow: 0 0 6px #B6B6B6;
                    }
                }
            }
            /*.card-div-content-type {*/
            /*    display: flex;*/
            /*    flex-direction: column;*/
            /*    gap: 10px;*/
            /*}*/
        }
    }
</style>
